<template>
	<div class="content">
		<van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="center">
			<van-cell-group inset>
				<van-cell :title="title">
					<template #right-icon>
						<van-image width="2rem" height="2rem" round fit="cover" :src="avatar" @click="show = !show" />
					</template>
				</van-cell>
				<van-cell title="性别" :value="sex">
				</van-cell>
				<van-cell title="邮箱" :value="email">
				</van-cell>
				<van-cell title="当前角色" :value="role" @click="changeRole" class="role">
					<template #right-icon>
						<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#1989fa"
							:disabled="isDisable" />
					</template>
				</van-cell>
			</van-cell-group>
		</div>
		<input type="file" class="sr-only" accept="image/png,image/jpeg,image/jpg"
			@change="uploadImage($event.target.files)" v-show="show" />
	</div>
</template>
  
<script setup>
import { ref } from 'vue'
import { uploadFile } from "~~/utils/upload";
import { ImgUrl } from '@/constant';

definePageMeta({
	title: '个人信息 | 疯味网点餐'
})

const onClickLeft = () => history.back();
const router = useRouter();
const userInfo = ref({
	avatar: '',
	nickname: '',
	phone: '',
	sex: 1,
	type: 0,
})
const checked = ref(false)
const isDisable = ref(false)
const title = ref('')
const sex = ref('')
const email = ref('')
const role = ref('')
const avatar = ref('')
const link = ref('')
const show = ref(false)
const userInfoCookie = useCookie('userInfo')
const changeRole = () => {
	if (!isDisable.value) {
		let info = userInfoCookie.value
		if (role.value == '顾客') {
			role.value = '商家'
			info.type = 0
			router.push('/handleorders')
		} else {
			role.value = '顾客'
			info.type = 1
			router.push('/user')
		}
		userInfoCookie.value = JSON.stringify(info)
	}
}

async function init() {
	userInfo.value = userInfoCookie.value
	if (userInfo.value) {
		title.value = userInfo.value.phone
		if (userInfo.value.sex == 2)
			sex.value = '保密'
		else
			sex.value = userInfo.value.sex == 1 ? '男' : '女'
		email.value = userInfo.value.nickname
		role.value = userInfo.value.type == 1 ? '顾客' : '商家'
		avatar.value = userInfo.value.avatar
		checked.value = userInfo.value.type == 0 ? true : false
	}
	let shop = {
		suid: userInfo.value.uid
	}
	const { data } = await myUseFetch('/getcodebyuid', { method: 'post', body: shop })
	let res = data.value
	if (res.code == -1) {
		console.log(res)
		isDisable.value = true
	} else if (res.code == 0) {
		// console.log(res)
		// sixcode.value = res.data
		// store.commit('setSixCode', res.data)
		// console.log(store.getters['getSixCode'])
	}
}
init()
async function modify(user) {
	const { data } = await myUseFetch('/upAvatar', { method: 'post', body: user })
	let res = data.value
	// console.log(data)
	if (res.code == -1) {
		console.log(res)
	} else if (res.code == 0) {
		let user1 = {
			nickname: email.value
		}
		const { data } = await myUseFetch('/getuser', { method: 'post', body: user1 })
		let res = data.value
		res.data.password = ''
		if (res.code == -1) {
			console.log(res)
		} else if (res.code == 0) {
			userInfoCookie.value = res.data
			avatar.value = res.data.avatar
			show.value = false
		}
	}
}
function uploadImage(files) {
	console.log(files)
	if (files.length > 0) {
		uploadFile(files[0]).subscribe({
			next: (result) => {
				console.log(result)
			},
			error: (err) => {
				console.log(err)
			},
			complete: (e) => {
				link.value = ImgUrl + e.key
				console.log(link.value)
				let user = {
					nickname: email.value,
					avatar: link.value,
				}
				modify(user)
			}
		})
	}
}

</script>
  
<style scoped lang="scss">
.content {
	height: 100vh;
	background-color: rgb(240, 236, 236);

	.center {
		margin: 0 auto;
		position: relative;
		top: 0.6rem;
		margin: 0 auto;

		.role {
			display: flex;
			align-items: center;
		}
	}

	.sr-only {
		display: inline-block;
		position: absolute;
		right: 1rem;
		top: 18rem;
		width: 5rem;
	}
}
</style>